<template>
  <div>
    <div id="components-form-demo-advanced-search">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          登录账号：<a-input
            :maxLength="128"
            v-model="searchData.emailAccount"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          电话号码：<a-input
            :maxLength="128"
            v-model="searchData.contactPhone"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          用户编号：<a-input
            :maxLength="128"
            v-model="searchData.serialNumber"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          <div v-show="!expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getAccTabList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
          <div v-show="expand">
            公司名称：<a-input
              v-model="searchData.companyName"
              style="width: 60%"
            />
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-show="expand">
        <a-col :span="6">
          账号状态：<a-select
            v-model="searchData.enableFlag"
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            allowClear
          >
            <a-select-option key="Y" value="Y"> 启用 </a-select-option>
            <a-select-option key="N" value="N"> 禁用 </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          创建时间：<a-range-picker
            v-model="acTime"
            @change="onStartDateChange"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          <div v-show="expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getAccTabList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
        </a-col>
        <a-col :span="6"> </a-col>
      </a-row>
    </div>
    <!-- //新增按钮 -->
    <div style="padding-left: 20px; margin-bottom: 10px">
      <a-button
        type="primary"
        style="
          background: #66b1ff;
          color: #fff;
          border: none;
          margin-left: 8px;
          margin-right: 20px;
        "
        @click="addAcc"
      >
        新增账号
      </a-button>
    </div>
    <!-- //表格 -->
    <a-spin tip="Loading..." :spinning="spinning">
      <a-table
        :columns="columns"
        :data-source="accTabData"
        :pagination="false"
        :scroll="{ x: 1200 }"
      >
        <span slot="enableFlag" slot-scope="text, record">
          <span
            :style="record.enableFlag === 'Y' ? 'color:#3EAE7C' : 'color:red'"
          >
            {{ record.enableFlag == "Y" ? "启用" : "禁用" }}
          </span>
        </span>
        <span slot="remark" slot-scope="text, record">
          {{ record.remark === null ? "暂无" : record.remark }}
        </span>
        <!-- <span slot="createTime" slot-scope="text, record">
          {{ record.createTime.toString().replaceAll('T','  ') }}
        </span> -->
        <span slot="action" class="action" slot-scope="text, record">
          <a slot="action" href="javascript:;" @click="editRow(record, 'edit')"
            >编辑</a
          >
          <a-divider type="vertical" />
          <a
            slot="action"
            href="javascript:;"
            @click="editRow(record, 'editPwd')"
            >修改密码</a
          >
          <a-divider type="vertical" />
          <a slot="action" href="javascript:;" @click="openWarehouse(record)"
            >仓库</a
          >
          <a-divider type="vertical" />
          <a slot="action" href="javascript:;" @click="openLogi(record)"
            >物流</a
          >
          <a-divider type="vertical" />
          <!-- <a slot="action" href="javascript:;" @click="editRow(record)">授权</a>
          <a-divider type="vertical" /> -->
          <a slot="action" href="javascript:;" @click="editRowTree(record)"
            >业务分配</a
          >
        </span>
      </a-table>
    </a-spin>
    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          :current="searchData.current"
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>
    <!-- //新增账号模态框 -->
    <a-modal
      v-model="AddAccVisible"
      :title="accflag === 'add' ? '新增账号' : '修改信息'"
      width="30%"
    >
      <template slot="footer" class="modelBtn">
        <a-button
          @click="AddAccVisible = false"
          style="background: #d7d7d7; color: #fff; border: none"
          >取消</a-button
        >

        <a-button :loading="loading" type="primary" @click="onSubmit()"
          >确认</a-button
        >
        <!-- <a-button
          :loading="loading"
          type="primary"
          @click="organizationSave('edit')"
          >确认</a-button
        > -->
      </template>
      <a-form-model
        style="width: 70%; margin: 0 auto"
        ref="ruleForm"
        :model="addAccForm"
        :rules="addAccRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item
          label="登录账号"
          prop="emailAccount"
          v-if="accflag != 'editPwd'"
        >
          <a-input
            :maxLength="128"
            :disabled="this.accflag === 'edit'"
            v-model="addAccForm.emailAccount"
          />
        </a-form-model-item>
        <a-form-model-item
          label="登录密码"
          prop="password"
          v-if="accflag === 'editPwd' || accflag === 'add'"
        >
          <a-input-password
            allow-clear
            autocomplete="autocomplete"
            v-model="addAccForm.password"
            type="password"
          >
            <!-- <a-icon slot="prefix" type="lock" /> -->
          </a-input-password>
        </a-form-model-item>
        <a-form-model-item
          label="效验密码"
          prop="confirmPassword"
          v-if="accflag === 'editPwd' || accflag === 'add'"
        >
          <a-input-password
            allow-clear
            autocomplete="autocomplete"
            v-model="addAccForm.confirmPassword"
            type="password"
          >
          </a-input-password>
        </a-form-model-item>
        <!-- <a-form-model-item label="所属代理" prop="type">
          <a-input v-model="addAccForm.desc" />
        </a-form-model-item> -->
        <a-form-model-item
          label="电话号码"
          prop="contactPhone"
          v-if="accflag != 'editPwd'"
        >
          <a-input :maxLength="128" v-model="addAccForm.contactPhone" />
        </a-form-model-item>
        <a-form-model-item
          label="用户姓名"
          prop="nickName"
          v-if="accflag != 'editPwd'"
        >
          <a-input :maxLength="128" v-model="addAccForm.nickName" />
        </a-form-model-item>
        <a-form-model-item
          label="客服组分配"
          prop="csdId"
          v-if="accflag != 'editPwd'"
        >
          <a-select
            show-search
            :filter-option="filterOption"
            v-model="addAccForm.csdId"
          >
            <a-select-option
              :value="item.key"
              v-for="item in serviceArray"
              :key="item.key"
            >
              {{ item.teamName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          label="所属销售"
          prop="speId"
          v-if="accflag != 'editPwd'"
        >
          <a-select
            show-search
            :filter-option="filterOption"
            v-model="addAccForm.speId"
          >
            <a-select-option
              :value="item.id"
              v-for="item in salesArray"
              :key="item.id"
            >
              {{ item.emailAccount }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          label="公司名称"
          prop="companyName"
          v-if="accflag != 'editPwd'"
        >
          <a-input :maxLength="128" v-model="addAccForm.companyName" />
        </a-form-model-item>
        <a-form-model-item
          label="使用期限"
          prop="startDate"
          v-if="accflag != 'editPwd'"
        >
          <a-range-picker
            :value="
              this.addAccForm.startDate === undefined ||
              this.addAccForm.endDate === undefined ||
              this.addAccForm.startDate === null ||
              this.addAccForm.endDate === null
                ? null
                : [
                    moment(this.addAccForm.startDate, 'YYYY-MM-DD'),
                    moment(this.addAccForm.endDate, 'YYYY-MM-DD'),
                  ]
            "
            @change="onChangeLifeSpan"
          />
        </a-form-model-item>
        <a-form-model-item
          label="备注"
          prop="remark"
          v-if="accflag != 'editPwd'"
        >
          <a-input
            v-model="addAccForm.remark"
            type="textarea"
            :maxLength="256"
          />
        </a-form-model-item>
        <a-form-model-item
          label="是否启用"
          prop="enableFlag"
          v-if="accflag != 'editPwd'"
        >
          <a-switch default-checked v-model="addAccForm.enableFlag" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- 业务配置权限树 -->
    <a-modal v-model="visibleTree" title="业务分配">
      <template slot="footer" class="modelBtn">
        <a-button
          @click="visibleTree = false"
          style="background: #d7d7d7; color: #fff; border: none"
          >取消</a-button
        >
        <a-button :loading="loading" type="primary" @click="handleOkTree()"
          >确认</a-button
        >
      </template>
      <div>
        <p style="color: red">注：修改权限后，需通知客户重新登录生效！</p>
      </div>
      <a-tree
        checkStrictly
        v-model="checkedKeysPC"
        checkable
        :expanded-keys="expandedKeysPC"
        :auto-expand-parent="false"
        :tree-data="roleTreeDataPC"
        @expand="onExpandPC"
        @check="onCheckPC"
      />
    </a-modal>
    <!-- //物流配置 -->
    <ConfigLogi />
    <!-- //仓库配置 -->
    <WarehouseConfig ref="warehouseConfig" />
  </div>
</template>

<script>
import moment from "moment";
import ConfigLogi from "@/components/system/acc/ConfigLogi";
import WarehouseConfig from "@/components/system/acc/WarehouseConfig";
import {
  acc_csd,
  acc_addCustomer,
  sysRole_tree,
  pageAccount_List,
  addCustomer_perm,
  getRoPer,
  editPwd,
  acc_getSpeInfo,
} from "@/apis/system/acc/acc";
import {
  appAccount_info,
  appAccount_edit,
} from "@/apis/system/Permission/AccManagement";
export default {
  components: {
    ConfigLogi,
    WarehouseConfig,
  },
  created() {
    this.getSpeInfo();
    this.getServiceArray();
    this.getAccTabList();
    this.getRoleTreeList();
  },
  data() {
    return {
      salesArray: [],
      moment,
      acTime: null,
      rowKey: "",
      // 按钮标杆
      accflag: "",
      //PC打开的树
      expandedKeysPC: [],
      //PC选中的树
      checkedKeysPC: [],
      //PC端树
      roleTreeDataPC: [],
      //权限树的标杆
      visibleTree: false,
      spinning: false,
      loading: false,
      //客服数组
      serviceArray: [],
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      //新增账号模态框
      AddAccVisible: false,
      expand: false,
      searchData: {
        type: 1,
        current: 1,
        emailAccount: null,
        contactPhone: null,
        companyName: null,
        enableFlag: null,
        endDate: null,
        size: 10,
        serialNumber: null,
        acStartDate: null,
        acEndDate: null,
      },
      //   总条数
      total: 5,
      //   表格数据
      accTabData: [
        {
          IDX: 1,
          warehouseName: "2",
          key: 1,
        },
      ],
      //   表单验证数据
      addAccForm: {
        emailAccount: null,
        password: null,
        confirmPassword: null,
        contactPhone: null,
        companyName: null,
        csdId: null,
        endDate: null,
        startDate: null,
        serviceLifeDate: null,
        enableFlag: true,
        speId: null,
        tenantId: null,
      },
      //   表单验证规则
      addAccRules: {
        emailAccount: [
          {
            required: true,
            validator: this.validateEmailAccount,
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            validator: this.validatePassword,
            trigger: "blur",
          },
        ],
        confirmPassword: [
          {
            required: true,
            validator: this.validateConfirmPassword,
            trigger: "blur",
          },
        ],
        contactPhone: [
          {
            required: true,
            validator: this.validateContactPhone,
            trigger: "blur",
          },
        ],
        csdId: [
          {
            required: true,
            validator: this.validateCsdId,
            trigger: "blur",
          },
        ],
        startDate: [
          {
            required: true,
            validator: this.validateServiceLifeDate,
            trigger: "blur",
          },
        ],
        nickName: [
          {
            required: true,
            validator: this.validateNickName,
            trigger: "blur",
          },
        ],
        companyName: [
          {
            required: true,
            validator: this.validateCompanyName,
            trigger: "blur",
          },
        ],
        speId: [
          {
            required: true,
            validator: this.validateSpeId,
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    //编辑每一行
    async editRow(record, flag) {
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.resetFields();
      }
      if (flag === "edit") {
        let { code, responseBody } = await appAccount_info(record.id);
        if (code === "200") {
          this.addAccForm.emailAccount = responseBody.emailAccount;
          this.addAccForm.nickName = responseBody.nickName;
          this.addAccForm.contactPhone = responseBody.contactPhone;
          this.addAccForm.csdId = responseBody.csdId;
          this.addAccForm.companyName = responseBody.companyName;
          this.addAccForm.remark = responseBody.remark;
          this.addAccForm.startDate = responseBody.startDate;
          this.addAccForm.endDate = responseBody.endDate;
          this.addAccForm.id = responseBody.id;
          this.addAccForm.speId = responseBody.speId;
          this.addAccForm.tenantId = responseBody.tenantId;

          if (record.enableFlag === "Y") {
            this.addAccForm.enableFlag = true;
          } else {
            this.addAccForm.enableFlag = false;
          }
          this.accflag = "edit";
          this.AddAccVisible = true;
        }
      } else if (flag === "editPwd") {
        this.addAccForm = {
          emailAccount: null,
          password: null,
          confirmPassword: null,
          contactPhone: null,
          companyName: null,
          csdId: null,
          endDate: null,
          startDate: null,
          serviceLifeDate: null,
          tenantId: null,
          enableFlag: true,
        };
        this.rowId = record.id;
        this.accflag = "editPwd";
        this.AddAccVisible = true;
      }
    },
    //权限树确定
    handleOkTree() {
      this.loading = true;
      setTimeout(async () => {
        let { code, message } = await addCustomer_perm(
          this.rowKey,
          this.checkedKeysPC
        );
        if (code === "10000") {
          this.loading = false;
          this.visibleTree = false;
        } else {
          this.$message.error(message);
          this.loading = false;
        }
      }, 1000);
    },
    // PC树形选中
    onCheckPC(checkedKeys) {
      this.checkedKeysPC = checkedKeys.checked;
    },
    // PC树形打开
    onExpandPC(expandedKeys) {
      this.expandedKeysPC = expandedKeys;
    },
    //业务配置权限树
    async editRowTree(record) {
      let { code, responseBody } = await getRoPer(record.key);
      if (code === "200") {
        let roleArray = [];
        if (responseBody.length >= 1) {
          responseBody.forEach((item) => {
            roleArray.push(item.permissionId);
          });
          this.checkedKeysPC = roleArray;
        } else if (responseBody.length <= 0) {
          this.checkedKeysPC = [];
        }
        this.rowKey = record.key;
        this.visibleTree = true;
      }
    },
    // 邮箱正则验证
    validateEmailAccount(rule, value, callback) {
      const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (this.accflag != "editPwd") {
        if (value === "" || value === undefined || value === null) {
          callback(new Error("邮箱不能为空！"));
        } else if (!reg.test(value)) {
          callback(new Error("请输入正确的邮箱格式！"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
    // 密码验证
    validatePassword(rule, value, callback) {
      const reg = /^[a-zA-Z]\w{7,17}$/;
      if (this.accflag === "editPwd" || this.accflag === "add") {
        if (value === "" || value === undefined || value === null) {
          callback(new Error("密码不能为空！"));
        } else if (!reg.test(value)) {
          callback(
            new Error("以字母开头，长度在8~18之间，只能包含字母、数字和下划线")
          );
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
    //验证二次密码
    validateConfirmPassword(rule, value, callback) {
      if (this.accflag === "editPwd" || this.accflag === "add") {
        if (value === "" || value === undefined || value === null) {
          callback(new Error("请输入确认密码！"));
        } else if (value != this.addAccForm.password) {
          callback(new Error("两次密码输入不一致，请检查密码！"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
    //验证电话号码
    validateContactPhone(rule, value, callback) {
      let reg = /^[0-9]*$/;
      if (this.accflag != "editPwd") {
        if (value === "" || value === undefined || value === null) {
          callback(new Error("电话号码不能为空！"));
        } else if (!reg.test(value)) {
          callback(new Error("请输入正确的电话号码！"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
    //验证电话号码
    validateCompanyName(rule, value, callback) {
      if (this.accflag != "editPwd") {
        if (value === "" || value === undefined || value === null) {
          callback(new Error("公司名称不能为空！"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
    //验证客服
    validateCsdId(rule, value, callback) {
      if (this.accflag != "editPwd") {
        if (value === "" || value === undefined || value === null) {
          callback(new Error("客服分配不能为空！"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
    //验证销售
    validateSpeId(rule, value, callback) {
      if (this.accflag != "editPwd") {
        if (value === "" || value === undefined || value === null) {
          callback(new Error("所属销售不能为空！"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
    //使用期限验证
    validateServiceLifeDate(rule, value, callback) {
      if (this.accflag != "editPwd") {
        if (
          value === "" ||
          value === undefined ||
          value === null ||
          value.length <= 0
        ) {
          callback(new Error("使用期限不能为空！"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
    //用户姓名验证
    validateNickName(rule, value, callback) {
      if (this.accflag != "editPwd") {
        if (
          value === "" ||
          value === undefined ||
          value === null ||
          value.length <= 0
        ) {
          callback(new Error("用户姓名不能为空！"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
    //   新增账号确定按钮
    onSubmit() {
      this.loading = true;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.accflag === "editPwd") {
            setTimeout(async () => {
              let { code } = await editPwd({
                id: this.rowId,
                password: this.addAccForm.password,
              });
              if (code === "10000") {
                this.AddAccVisible = false;
                this.getAccTabList();
                this.loading = false;
              } else {
                // this.$message.error(message);
              }
            }, 1000);
          } else if (this.accflag === "add") {
            let submitObj = { ...this.addAccForm };
            if (this.addAccForm.enableFlag) {
              submitObj.enableFlag = "Y";
            } else {
              submitObj.enableFlag = "N";
            }

            setTimeout(async () => {
              let { code } = await acc_addCustomer(submitObj);
              if (code === "10000") {
                this.getAccTabList();
                this.loading = false;
                this.AddAccVisible = false;
              } else {
                // this.$message.error(message);
                this.loading = false;
              }
            }, 1000);
          } else if (this.accflag === "edit") {
            let submitObj = { ...this.addAccForm };
            if (this.addAccForm.enableFlag) {
              submitObj.enableFlag = "Y";
            } else {
              submitObj.enableFlag = "N";
            }

            setTimeout(async () => {
              let { code } = await appAccount_edit(submitObj);
              if (code === "10000") {
                this.getAccTabList();
                this.loading = false;
                this.AddAccVisible = false;
              } else {
                // this.$message.error(message);
                this.loading = false;
              }
            }, 1000);
          }
        } else {
          this.loading = false;
          return false;
        }
      });
    },
    //新增账号
    addAcc() {
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.resetFields();
      }
      this.accflag = "add";
      this.addAccForm = {
        emailAccount: null,
        password: null,
        confirmPassword: null,
        contactPhone: null,
        companyName: null,
        csdId: null,
        endDate: null,
        startDate: null,
        serviceLifeDate: null,
        tenantId: null,
        enableFlag: true,
      };
      this.AddAccVisible = true;
    },
    //重置按钮
    resetSearch() {
      let current = this.searchData.current;
      let size = this.searchData.size;
      for (let key in this.searchData) {
        this.searchData[key] = null;
      }
      this.acTime = null;
      this.searchData.current = current;
      this.searchData.type = 1;
      this.searchData.size = size;
      this.getAccTabList();
    },
    //时间查询
    onStartDateChange(date, dateString) {
      this.searchData.acStartDate = dateString[0];
      this.searchData.acEndDate = dateString[1];
    },
    //使用期限
    onChangeLifeSpan(data, dateString) {
      this.addAccForm.startDate = dateString[0];
      this.addAccForm.endDate = dateString[1];
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getAccTabList();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getAccTabList();
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    async getServiceArray() {
      let { code, responseBody } = await acc_csd();
      if (code === "200") {
        this.serviceArray = responseBody;
      }
    },
    //获取现有销售列表
    async getSpeInfo() {
      let { code, responseBody } = await acc_getSpeInfo();
      if (code === "200") {
        this.salesArray = responseBody;
      }
    },
    async getAccTabList() {
      this.spinning = true;
      let { code, responseBody } = await pageAccount_List(this.searchData);
      if (code === "200") {
        responseBody.records.forEach((item) => {
          item.key = item.id;
          item.createTime = item.createTime.replaceAll("T", " ");
        });
        this.total = responseBody.total * 1;
        this.accTabData = responseBody.records;
        this.spinning = false;
      }
    },
    //获取权限树
    async getRoleTreeList() {
      let { code, responseBody } = await sysRole_tree(2);
      if (code === "200") {
        this.roleTreeDataPC = this.resetTree(responseBody.allTree);
      }
    },
    //重构树
    resetTree(data) {
      data.forEach((item) => {
        item.title = item.permissionName;
        item.key = item.id;
        if (item.children && item.children.length >= 1) {
          this.resetTree(item.children);
        }
      });
      return data;
    },
    //每一行的物流配置
    openLogi(record) {
      this.$bus.$emit("configLogi", record);
    },
    //每一行仓库配置
    openWarehouse(record) {
      setTimeout(() => {
        this.$bus.$emit("openWarehouse", record);
      }, 1);
    },
  },
  computed: {
    columns() {
      return [
        {
          title: "用户编号",
          dataIndex: "serialNumber",
          align: "center",
          width: "6%",
          ellipsis: true,
        },
        {
          title: "用户账号",
          dataIndex: "emailAccount",
          align: "center",
          // scopedSlots: { customRender: "selfClassifyName" },
          width: "10%",
        },
        {
          title: "电话号码",
          dataIndex: "contactPhone",
          align: "center",
          width: "10%",
        },
        {
          title: "用户姓名",
          dataIndex: "nickName",
          align: "center",
          width: "12%",
        },
        {
          title: "公司名称",
          dataIndex: "companyName",
          scopedSlots: { customRender: "companyName" },
          align: "center",
          width: "10%",
        },
        {
          title: "账号状态",
          dataIndex: "enableFlag",
          scopedSlots: { customRender: "enableFlag" },
          align: "center",
          width: "8%",
        },
        {
          title: "到期时间",
          dataIndex: "endDate",
          scopedSlots: { customRender: "endDate" },
          align: "center",
          width: "8%",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          scopedSlots: { customRender: "createTime" },
          align: "center",
          width: "8%",
        },
        {
          title: "备注",
          dataIndex: "remark",
          scopedSlots: { customRender: "remark" },
          align: "center",
          width: "10%",
          // ellipsis: true,
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
          width: 300,
          fixed: "right",
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
.action {
  a {
    border-bottom: 1px solid rgb(41, 41, 224);
    color: rgb(41, 41, 224);
  }
}
.ant-divider,
.ant-divider-vertical {
  margin: 0 4px;
}
.ant-form-item {
  margin-bottom: 14px;
}
</style>
